import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Modal,Button, Form,Input,Icon,Select,DatePicker,Upload,Radio} from 'antd';

const FormItem = Form.Item;

import {FFileUpload} from './../../public/components/index';
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

function addDome({dispatch,form,addDome}) {
    const  {visible,detail,country} = addDome;
    const { getFieldDecorator,validateFields,resetFields} = form;
    if(!visible){resetFields()} // 初始化表单数据

    function saveMenuHander() {
      validateFields(function (err,values) {
        values["date-picker"]=values['date-picker'] ? values['date-picker'].format('YYYY-MM-DD'):"";
        if(!err){
          Object.assign(detail,{values});
          console.info(detail);
          dispatch({type: 'addDome/add', payload:{detail:detail}});
        }else {
          console.info(err)
        }
      })
    }
    function hideModelHandler() {
      dispatch({type: 'addDome/save', payload:{visible:false}});
    }
  const formItemLayout = {
    labelCol: {
      xs: { span: 4 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 18 },
      sm: { span: 18 },
    }
  };
  const fileUploadProps = {
    accept: '',
    countLimit:1,
    labelText: '背景图',
    url:"/ffalconvip/textConfCms/v1/uploadFile",
    defaultList:[],
    getList: list => {
      let imgs = [];
      for (let i = 0; i < list.length; i++) {
        imgs.push(list[i].response.data);
      }
      detail.backimg=imgs.join('');
      dispatch({
        type: `addDome/save`,
        payload:{detail:detail}
      });
    }
  };
    return (
      <span>
          <Modal title={detail.id ? "编辑" : "新增"} visible={visible} onOk={saveMenuHander} onCancel={hideModelHandler}>
              <Form  onSubmit={saveMenuHander}>
                  <FormItem {...formItemLayout}  label="姓名">
                     {
                       getFieldDecorator('userName', { normalize:function (value, prevValue, allValues) {return value},initialValue:detail.name,rules: [{ required: true, message: '请输入你姓名!' }]})
                       (
                         <Input placeholder="Username" />
                       )
                     }
                  </FormItem>
                  <FormItem {...formItemLayout} label="性别">
                        {getFieldDecorator('sex',{initialValue:detail.sex,rules: [{required: true,message: '请选择你的性别!' }]})(
                          <RadioGroup>
                            <Radio value="1">男</Radio>
                            <Radio value="2">女</Radio>
                            <Radio value="3">人妖</Radio>
                          </RadioGroup>
                        )}
                  </FormItem>
                  <FormItem{...formItemLayout} label="开始时间">
                         {getFieldDecorator('date-picker', {initialValue:detail.timer ? moment(detail.timer,"YYYY-MM-DD HH:mm:ss"):"",rules: [{ type: 'object', required: true, message: 'Please select time!' }]})(
                          <DatePicker style={{width: "366px"}} showTime format="YYYY-MM-DD HH:mm:ss" />
                      )}
                  </FormItem>
                  <FormItem {...formItemLayout} label="爱好">
                   {getFieldDecorator('select', {initialValue:detail.select,rules: [{message: 'Please select time!' }]})(
                            <Select allowClear placeholder="请选择">
                              <Option value="1">篮球</Option>
                              <Option value="2">羽毛球</Option>
                              <Option value="3">足球</Option>
                            </Select>
                  )}
                  </FormItem>
                   <FormItem {...formItemLayout} label="国家">
                      {getFieldDecorator('select1', {initialValue:detail.country,rules: []})(
                        <Select allowClear mode="multiple" placeholder="请选择">
                          {
                            country.map(function (data,index){
                              return <Select.Option key={index+''} value={data.dome}>{data.dome}</Select.Option>
                            })
                          }
                        </Select>
                      )}
                   </FormItem>
                   <FormItem {...formItemLayout} label="头像">
                         <FFileUpload  {...fileUploadProps}></FFileUpload>
                         {/*{getFieldDecorator('aaaaa', {initialValue:[{*/}
                           {/*uid: -1,*/}
                           {/*name: 'xxx.png',*/}
                           {/*status: 'done',*/}
                           {/*url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',*/}
                         {/*}],valuePropName: 'fileList',getValueFromEvent:normFile})(*/}
                         {/*<Upload name="logo" action="/ffalconvip/textConfCms/v1/uploadFile" listType="picture">*/}
                         {/*<Button>*/}
                         {/*<Icon type="upload" /> Click to upload*/}
                         {/*</Button>*/}
                         {/*</Upload>*/}
                         {/*)}*/}
                   </FormItem>
                   <FormItem {...formItemLayout}  label="描述">
                     {
                       getFieldDecorator('desc', { normalize:function (value, prevValue, allValues) {return value},initialValue:detail.desc,rules: [{ required: true, message: '请输入你姓名!' }]})
                       (
                         <TextArea placeholder="描述" />
                       )
                     }
                  </FormItem>
                  </Form>
          </Modal>
        </span>
    );
}
function mapStateToProps({addDome}) {
  return {addDome};
}
export default connect(mapStateToProps)(Form.create()(addDome));
